import React, { Component } from 'react'

export default class Count extends Component {
  // constructor() {
  //   super()
  //   // 类组件中如果要往Count实例上添加数据,属性名必须叫state
  //   this.state = {
  //     count: 10,
  //     msg: 'web0310',
  //   }

  //   // this.handle = () => {
  //   //   this.setState({
  //   //     count: this.state.count + 1,
  //   //   })
  //   // }
  // }

  // 这样写handle加到了原型上
  // handle(){}

  // es7中提供的新语法: 这里的代码和上面构造器中的代码作用一样. 只是一种简写形式
  state = {
    count: 10,
    msg: 'web0310',
  }

  // 这样写,就是把handle直接加到实例上
  handle = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }

  render() {
    //注意:render函数中的this,也一定是当前Count组件的实例
    console.log('render函数执行了')
    return (
      <div>
        <p>{this.state.count}</p>
        {/* 这里的this.handle. 是组件实例上的handle */}
        <button onClick={this.handle}>+</button>
      </div>
    )
  }
}
